<%@ page pageEncoding="UTF-8" %>
<%@ include file="common/global.jsp" %>

<head>
    <%@ include file="common/meta.jsp" %>
    <title><f:message key="common.title"/> - <f:message key="menu.components.Bonus"/></title>
    <%@ include file="common/css.jsp" %>
    <link href="${BASE}/www/css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet">
    <link href="${BASE}/www/js/plugins/msgGrowl/css/msgGrowl.css" rel="stylesheet">
    <link href="${BASE}/www/js/plugins/lightbox/themes/evolution-dark/jquery.lightbox.css" rel="stylesheet">
    <link href="${BASE}/www/js/plugins/msgbox/jquery.msgbox.css" rel="stylesheet">
    <style>
        .btn { margin: 0 .75em 1em 0; }
    </style>
</head>

<body>

<div id="wrapper">


<%@ include file="common/topbar.jsp" %>
<%@ include file="common/header.jsp" %>

    <div id="masthead">

        <div class="container">

            <div class="masthead-pad">

                <div class="masthead-text">
                    <h2>Bonus Elements</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div> <!-- /.masthead-text -->

            </div>

        </div> <!-- /.container -->

    </div> <!-- /#masthead -->
    <div id="content">

        <div class="container">

            <div class="row">

                <div class="span12">

                    <h3>Alert & Confirm</h3>

                    <hr />

                    <a href="javascript:;" class="btn btn-tertiary msgbox-alert">Alert Message</a>
                    <a href="javascript:;" class="btn btn-tertiary msgbox-info">Information Message</a>
                    <a href="javascript:;" class="btn btn-tertiary msgbox-error">Error Message</a>
                    <a href="javascript:;" class="btn btn-tertiary msgbox-confirm">Confirm Message</a>
                    <a href="javascript:;" class="btn btn-tertiary msgbox-prompt">Prompt Message</a>

                </div> <!-- /.span12 -->

            </div>



            <div class="row">

                <div class="span12">

                    <h3>Lightbox</h3>

                    <hr />

                    <a href="${BASE}/www/img/lightbox/4.jpg" class="btn btn-primary ui-lightbox">Show Image Lightbox</a>
                    <a href="http://www.youtube.com/watch?v=TsUD1za9TA4" class="btn btn-primary ui-lightbox">Show Video</a>
                    <a href="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=+paris+eiffel&amp;ie=UTF8&amp;hq=eiffel&amp;hnear=Paris,+Ile-de-France,+France&amp;ll=48.855708,2.300434&amp;spn=0.013243,0.042272&amp;z=15&amp;lightbox[width]=610&amp;lightbox[height]=360" class="btn btn-primary ui-lightbox">Show Maps</a>

                </div> <!-- /.span12 -->

            </div>


            <div class="row">

                <div class="span12">

                    <h3>Growl Message</h3>

                    <hr />
                    <button class="btn btn-secondary growl-type" data-type="info">Show Info Growl</button>
                    <button class="btn btn-secondary growl-type" data-type="success">Show Success Growl</button>
                    <button class="btn btn-secondary growl-type" data-type="warning">Show Warning Growl</button>
                    <button class="btn btn-secondary growl-type" data-type="error">Show Error Growl</button>

                    <div class="clear"></div>

                </div> <!-- /.span12 -->

            </div> <!-- /.row -->


        </div> <!-- /.container -->

    </div> <!-- /#content -->

</div> <!-- /#wrapper -->



<%@ include file="common/footer.jsp" %>
<%@ include file="common/js.jsp" %>

<script src="${BASE}/www/js/plugins/msgGrowl/js/msgGrowl.js"></script>
<script src="${BASE}/www/js/plugins/lightbox/jquery.lightbox.js"></script>
<script src="${BASE}/www/js/plugins/msgbox/jquery.msgbox.min.js"></script>
<script src="${BASE}/www/js/demos/demo.bonus.js"></script>

<script>
    $(function () {
        if ($.fn.lightbox) {
            $('.ui-lightbox').lightbox();
        }

        if ($.fn.cirque) {
            $('.ui-cirque').cirque ({  });
        }

        $('#wrapper').append ('<div class="push"></div>');

        $("#nav2").addClass("active").sibling.removeClass("active");
    });
</script>

</body>
</html>